<template>
  <div>
    <div class="payment-container">
      <el-dialog title="" :visible.sync="dialogVisible" width="765px">
        <div style="
font-family: PingFang SC, PingFang SC;
font-weight: 500;
font-size: 20px;
color: #333333;
padding: 18px 0 24px 24px;
font-style: normal;
text-transform: none;
-webkit-text-stroke: 1px rgba(0,0,0,0);">
          请支付会费
        </div>
        <div class="membership-options">

          <!-- <el-row>
            <el-col :span="5" v-for="(option, index) in membershipOptions" :key="index" @click="selectOption(index)">
              <el-card :class="{ 'active': selectedOption === index }">
                <h3>{{ option.title }}</h3>
                <p class="price"><span>¥{{ option.price }}</span> {{ option.duration }}</p>
                
              </el-card>
            </el-col>
          </el-row> -->

          <div style="display: flex;justify-content: space-between;padding: 0 24px;">
            <div v-for="(option, index) in membershipOptions" :key="index" @click="selectOption(index)" :class="{'SetMealActive': option.checked}" style=" position: relative;">
              <div class="SetMeal" >
                <div class="SetMealTitle">
                  {{ option.title }}
                </div>

                <p>
                  <span style="
font-family: PingFang SC, PingFang SC;
font-weight: 500;
font-size: 18px;
color: #FF0000;
font-style: normal;
text-transform: none;">¥</span><span style="
font-family: DIN Alternate, DIN Alternate;
font-weight: bold;
font-size: 28px;
color: #FF0000;
font-style: normal;
text-transform: none;">{{ (+option.price).toFixed(0) }}</span><span style="
font-family: PingFang SC, PingFang SC;
font-weight: 400;
font-size: 14px;
color: #1C1C1C;
font-style: normal;
text-transform: none;">/{{ option.month }}</span>
                </p>
               
              </div>
              <el-checkbox class="optionCheck" v-model="option.checked"></el-checkbox>
            </div>
            
          </div>

          <p class="note">注：支付成功后完成入驻，可开设店铺，上传产品及公司资料</p>
        </div>
        <div class="payment-methods">
          <p></p>
          <el-row>
            <el-col style="margin-left: 24px;" :span="3">
              支付方式：
            </el-col>
            <el-col :span="5">
              <el-radio-group v-model="selectedPayment">
                <el-radio label="wechat" :name="1">
                  <img style="width: 36px;height: 36px;" src="../../../../../static/payment/wx.png" alt=""
                    class="pay-icon"> 微信支付
                </el-radio>
              </el-radio-group>
            </el-col>
            <el-col :span="5">
              <el-radio-group v-model="selectedPayment">
                <el-radio label="alipay" :name="2">
                  <img style="width: 36px;height: 36px;" src="../../../../../static/payment/zf.png" alt=""
                    class="pay-icon"> 支付宝支付
                </el-radio>
              </el-radio-group>
            </el-col>
            <el-col :span="5">
              <el-radio-group v-model="selectedPayment">
                <el-radio label="bank" :name="3">
                  <img style="width: 41.58px;height: 28px;" src="../../../../../static/payment/yhk.png" alt=""
                    class="pay-icon"> 银行卡
                </el-radio>
              </el-radio-group>
            </el-col>
          </el-row>
        </div>
        <div class="qr-code-section" v-if="selectedPayment === 'wechat'">
          <div>
            <div class="qr-code">
              <img style="width: 100%;height: 100%;" src="" alt="">
            </div>
            <div style="
font-family: PingFang SC, PingFang SC;
font-weight: 400;
font-size: 14px;
color: #333333;
text-align: center;
font-style: normal;
text-transform: none;margin-top: 5px;">
              扫码支付
            </div>
          </div>



          <div class="qr-code-info">
            <p class=".qr-code-text">支付剩余时间{{ countdown }}秒</p>
            <p class=".qr-code-text" style="margin-top: 10px;">已通过安全检测，请使用微信APP扫码支付</p>
            <p style="margin-top: 27px;">
            <div style="
font-family: PingFang SC, PingFang SC;
font-weight: 400;
font-size: 14px;
color: #666666;

text-align: left;
font-style: normal;
text-transform: none;">
              支付金额
            </div>
            <div style="margin-top: 9px;">
              <span style="
font-family: PingFang SC, PingFang SC;
font-weight: 500;
font-size: 18px;
color: #FF0000;
text-align: left;
font-style: normal;
text-transform: none;">¥



              </span>
              <span style="
font-family: DIN Alternate, DIN Alternate;
font-weight: bold;
font-size: 28px;
color: #FF0000;
text-align: left;a
font-style: normal;
text-transform: none;">
                {{ selectedOptionPrice }}
              </span>
            </div>

            </p>
          </div>
        </div>
        <div slot="footer" class="dialog-footer">
          <!-- 这里可以添加确认支付等按钮逻辑 -->
        </div>
      </el-dialog>

    </div>


    <paymentDialog></paymentDialog>


  </div>
</template>
<script>

import paymentDialog from './paymentDialog.vue';

export default {
  name: "newPayment",
  components: {
    paymentDialog
  },
  data() {
    return {
      dialogVisible: false,
      membershipOptions: [
        { title: '季度会员', price: 25000, duration: '/季度', checked: false },
        { title: '半年会员', price: 40000, duration: '/半年', checked: false },
        { title: '1年会员', price: 60000, duration: '/年', checked: false },
        { title: '2年会员', price: 100000, duration: '/2年', checked: false }
      ],
      selectedOption: 0,
      selectedPayment: 'wechat',
      countdown: 1800, // 假设初始剩余时间为30分钟（1800秒）
      timer: null
    };
  },
  computed: {
    selectedOptionPrice() {
      return this.membershipOptions[this.selectedOption].price;
    }
  },
  created() {
    this.startCountdown();
    this.getData();
  },
  methods: {
    getData(){
      this.$httpApi("/api/vips", {
      },'get').then(res=>{
        res.data.map(item=>{
          item.checked = false;
        })
        this.membershipOptions = res.data;
        
      })
    },
    setVisible(){
      this.dialogVisible = true;
    },
    selectOption(index) {
      this.selectedOption = index;
      this.membershipOptions.forEach((option, i) => {
        option.checked = i === index;
      });
    },
    startCountdown() {
      this.timer = setInterval(() => {
        if (this.countdown > 0) {
          this.countdown--;
        } else {
          clearInterval(this.timer);
        }
      }, 1000);
    },
    // 可以在这里添加支付相关的方法，如调用后端接口等
  },
  beforeDestroy() {
    clearInterval(this.timer);
  }
};

</script>
<style scoped lang="less">
/deep/ .el-dialog {
  border-radius: 12px 12px 4px 4px;
  overflow: hidden;
}

/deep/ .el-dialog__header{
  background: #F4F7FA; 
}
/deep/ .el-dialog__footer {
  background: #F4F7FA; 
}

/deep/ .el-dialog__body {
  padding: 0 !important;
  background: #F4F7FA;
  // height: 536px;
}

.optionCheck{
  position: absolute;
  bottom: 0;
  right: 0;
}


.SetMealTitle {
  font-family: PingFang SC, PingFang SC;
  font-weight: 500;
  font-size: 20px;
  color: #333333;
  margin-top: 34PX;
  font-style: normal;
  text-transform: none;
  -webkit-text-stroke: 1px rgba(0, 0, 0, 0);
  margin-bottom: 22PX;
  display: flex;
    flex-direction: column;
    position: relative;
}

.SetMeal {
  width: 164px;
  height: 160px;
  // background: rgba(0, 82, 217, 0.03);
  background: #FFFFFF;
  border-radius: 8px 8px 8px 8px;
  // border: 2px solid #0052D9;
  text-align: center;
}
.SetMealActive{
  background: rgba(0, 82, 217, 0.03);
  border: 2px solid #0052D9;
}

.payment-container {
  padding: 20px;

}

.membership-options {
  margin-bottom: 20px;
}

.membership-options.el-card {
  text-align: center;
  cursor: pointer;
  border: 1px solid #ccc;
  border-radius: 4px;
  padding: 20px;
  transition: all 0.3s ease;
}

/deep/ .el-card__body,
.el-main {
  width: 164px;
  height: 160px;
  padding: 0;
}

.membership-options.el-card.active {

  background: rgba(0, 82, 217, 0.03);
  border-radius: 8px 8px 8px 8px;
  border: 2px solid #0052D9;
}

.price {
  color: red;
  font-size: 18px;
  margin-top: 10px;
}

.note {

  font-family: PingFang SC, PingFang SC;
  font-weight: 400;
  font-size: 14px;
  color: #333333;
  font-style: normal;
  text-transform: none;
  -webkit-text-stroke: 1px rgba(0, 0, 0, 0);
  margin-top: 20px;
  margin-left: 24px;
}

.payment-methods {
  margin-bottom: 20px;
}

.pay-icon {
  width: 20px;
  height: 20px;
  vertical-align: middle;
  margin-right: 5px;
}

.qr-code-section {
  display: flex;
  padding: 20px;
  width: 708px;
  height: 174px;
  background: #FFFFFF;
  border-radius: 12px 12px 12px 12px;
  border: 1px solid #E8E8E9;
  margin: auto;
}

.qr-code {
  width: 120px;
  height: 120px;
}

.qr-code-info {
  margin-left: 26px;
}

.qr-code-text {

  font-family: PingFang SC, PingFang SC;
  font-weight: 400;
  font-size: 14px;
  color: #333333;

  text-align: left;
  font-style: normal;
  text-transform: none;
  -webkit-text-stroke: 1px rgba(0, 0, 0, 0);
}

.amount {
  color: red;
  font-size: 18px;
}

.dialog-footer {
  text-align: right;
}
</style>